<template>
	<view class="rescue">
		<view class="map">
			<hchPosition :storeData="[]" :markers="[]"></hchPosition>
		</view>
		<view class="notice">
			<uni-notice-bar color="#EA1703" background-color="#FFFFFF" style="width:650rpx; height:10rpx;" show-icon
				scrollable text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</view>
		<!-- 表单的 -->
		<view class="uni-padding-wrap">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#FF4E4E"
				@clickItem="onClickItem" />
		</view>

		<view v-if="current != 2 ">
			<view class="content">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="formData">
					<uni-forms-item label="位置" required>
						<uni-easyinput v-model="formData.adress" placeholder="请输入您的位置" />
					</uni-forms-item>
					<uni-forms-item label="求助人" required>
						<uni-easyinput v-model="formData.name" placeholder="请输入您的姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required>
						<uni-easyinput v-model="formData.tel" placeholder="请输入您的手机号" />
					</uni-forms-item>
					<uni-forms-item label="车牌" required>
						<uni-easyinput v-model="formData.carNum" placeholder="请输入您的车牌" />
					</uni-forms-item>
				</uni-forms>
				<view class="tip">请准确描述当前状况豫所需帮助</view>
			</view>
		</view>
		<view v-if="current === 2">
			<view class="content">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="formData">
					<uni-forms-item label="起点" required>
						<uni-easyinput v-model="formData.adress" placeholder="请输入起点" />
					</uni-forms-item>
					<uni-forms-item label="终点" required>
						<uni-easyinput v-model="formData.endAdress" placeholder="请输入终点" />
					</uni-forms-item>
					<uni-forms-item label="求助人" required>
						<uni-easyinput v-model="formData.name" placeholder="请输入您的姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required>
						<uni-easyinput v-model="formData.tel" placeholder="请输入您的手机号" />
					</uni-forms-item>
					<uni-forms-item label="车型" required>
						<uni-data-select clear v-model="formData.license" :localdata="candidates"
							@change="change"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<view class="tip">请准确描述当前状况豫所需帮助</view>
			</view>
		</view>
		<view class="help">
			<view>警务求助</view>
			<view class="help_info">
				<view><text>交通事故</text><text style=" color:#2474FF;">122</text></view>
				<view><text>火警</text><text style=" color:#2474FF;">119</text></view>
				<view><text>急救中心</text><text style=" color:#2474FF;">120</text></view>
				<view><text>公安报警</text><text style=" color:#2474FF;">110</text></view>
			</view>
		</view>
		<view class="button_rescue" @click="send">
			呼叫救援
		</view>
		<view class="rescue_code" @click="toCode">
			救援记录
		</view>
		<zw-tabbar :defaultSel="0" @clickTab="clickTab" :bigIdx="1"></zw-tabbar>
	</view>
</template>

<script>
	import hchPosition from "../../wxcomponents/hch-position/hch-position"
	import AppVue from "../../App.vue"
	export default {
		data() {
			return {
				items: ['搭电', '换胎', '拖车'],
				current: 0,
				formData: {}, //求助信息
				candidates: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				], //车型数据
			}
		},
		components: {
			hchPosition,
		},
		methods: {
			// 新增救援
			send(){
				uni.request({
					url:'http://localhost/dev-api/business/rescueTask',
					method:'POST',
					header:{
						Authorization: AppVue.token,
					},
					data:this.formData,
					success(resp) {
						console.log('新增成功'),
						console.log(this.formData);
					}
				})
			},
			//救援记录
			toCode() {
				uni.navigateTo({
					url: '/pages/rescue/rescueCode/rescueCode'
				})	
			},
			//下拉框改变
			change(e) {
				console.log("e:", e);
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			clickTab(idx) {
				this.tabBarIdx = idx;
			}
		}
	}
</script>

<style scoped>
	.rescue {
		height: 100%;
		padding-bottom: 250rpx;
		background-color: white;
	}

	.map {
		position: relative;
	}

	.notice {
		position: absolute;
		top: 20rpx;
		left: 50rpx;
	}

	/* 导航标签 */
	.uni-padding-wrap {
		width: 400rpx;
		margin: 20rpx auto 20rpx;
	}

	/* 搭电 */
	.content {
		padding: 10rpx 30rpx 0 30rpx;
	}

	/deep/ .uni-forms-item__label[data-v-61dfc0d0] {
		width: 160rpx !important;
	}

	/* 提示 */
	.tip {
		color: red;
		padding-left: 100rpx;
		margin-top: -30rpx;
	}

	/* 帮助 */

	.help>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 10rpx;
	}

	.help_info {
		display: flex;
		flex-wrap: wrap;

	}

	.help_info>view {
		width: 350rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.help_info>view {
		width: 350rpx;
		padding: 10rpx 10rpx 10rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 呼叫按钮 */
	.button_rescue {
		width: 300rpx;
		height: 90rpx;
		font-size: 45rpx;
		color: white;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		background-color: #FD9518;
		margin: auto;
		margin-top: 40rpx;
	}

	/* 救援记录 */
	.rescue_code {
		color: #377FFF;
		text-align: center;
		padding-top: 10rpx;
	}
</style>